<template>
  <div class="wrapper">
    <div class="content">
      <!-- 用户信息头部 -->
      <div class="user-info">
        <div class="avatar-box">
          <img
            :src="userInfo?.avatar"
            alt="头像"
            class="avatar"
            @error="handleAvatarError"
          />
        </div>
        <div class="info-box" v-if="userInfo">
          <h2>{{ userInfo.nickname || userInfo.username }}</h2>
          <p>等级: {{ membershipLevel?.levelName || "普通会员" }}</p>
          <p>积分: {{ userInfo.points || 0 }}</p>
        </div>
        <div class="info-box" v-else @click="toLogin">
          <h2>点击登录</h2>
          <p>登录后享受更多服务</p>
        </div>
      </div>

      <!-- 订单信息 -->
      <div class="order-section">
        <div class="section-title">我的订单</div>
        <div class="order-types">
          <div class="type-item" @click="goToOrders(1)">
            <i class="fa fa-clock-o"></i>
            <p>待支付</p>
          </div>
          <div class="type-item" @click="goToOrders(2)">
            <i class="fa fa-truck"></i>
            <p>待收货</p>
          </div>
          <div class="type-item" @click="goToOrders(0)">
            <i class="fa fa-list-alt"></i>
            <p>全部订单</p>
          </div>
        </div>
      </div>

      <!-- 功能列表 -->
      <div class="function-list">
        <div class="list-item" @click="router.push('/address')">
          <i class="fa fa-map-marker"></i>
          <span>收货地址</span>
          <i class="fa fa-angle-right"></i>
        </div>
        <div class="list-item" @click="goToCustomerService">
          <i class="fa fa-phone"></i>
          <span>咪咕客服</span>
          <i class="fa fa-angle-right"></i>
        </div>
        <div class="list-item" @click="handleLogout" v-if="userInfo">
          <i class="fa fa-sign-out"></i>
          <span>退出登录</span>
          <i class="fa fa-angle-right"></i>
        </div>
      </div>
    </div>

    <!-- Footer 组件 -->
    <Footer></Footer>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ElMessageBox } from "element-plus";
import Footer from "../components/Footer.vue";
import defaultAvatar from "../assets/img/default.png";
import { getUserInfo } from "../api/user";
import { getMembershipLevel } from "../api/membershipLevels";
import { useUserInfoStore } from "../stores/user";
import { handleAvatarUrl, handleAvatarError } from '@/utils/imageUtils'
const router = useRouter();
const userInfo = ref(null);
const membershipLevel = ref(null);

const userInfoStore = useUserInfoStore();
const loadUserInfo = async () => {
  try {
    const res = await getUserInfo(userInfoStore.userInfo.id);
    if (res.code === 0) {
      userInfo.value = {
        ...res.data,
        avatar: handleAvatarUrl(res.data.avatar)
      };
      loadMembershipLevel(res.data.membershipLevelId);
    }
  } catch (error) {
    console.error("获取用户信息失败:", error);
  }
};

const loadMembershipLevel = async (levelId) => {
  try {
    const res = await getMembershipLevel(levelId);
    if (res.code === 0) {
      membershipLevel.value = res.data;
    }
  } catch (error) {
    console.error("获取会员等级信息失败:", error);
  }
};

onMounted(() => {
  loadUserInfo();
});

const toLogin = () => {
  router.push("/login");
};

const handleLogout = () => {
  ElMessageBox.confirm("确定要退出登录吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      // 清除用户信息
      sessionStorage.removeItem("user");
      localStorage.removeItem("token");
      userInfo.value = null;
      membershipLevel.value = null;
      userInfoStore.setUserInfo(null);
      // 跳转到登录页
      router.push("/login");
    })
    .catch(() => {
      // 取消退出，不做任何操作
    });
};

const goToOrders = (tabIndex) => {
  router.push({ path: "/order", query: { tab: tabIndex } });
};

const goToCustomerService = () => {
  router.push({ name: "customer-service" });
};

const formatPhone = (phone) => {
  if (!phone) return "";
  return phone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
};

const handleImageError = (e) => {
  console.error("头像加载失败");
  e.target.src = defaultAvatar;
};
</script>

<style scoped>
.wrapper {
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  padding-bottom: 14vw;
  overflow-y: auto;
}

.content {
  width: 100%;
  height: 100%;
}

.user-info {
  background-color: #ff7043;
  padding: 5vw 4vw;
  display: flex;
  align-items: center;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.avatar-box {
  width: 16vw;
  height: 16vw;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 4vw;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.info-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.info-box h2 {
  font-size: 4.8vw;
  font-weight: bold;
  margin-bottom: 2vw;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.info-box p {
  font-size: 3.5vw;
  margin-bottom: 1vw;
  opacity: 0.9;
}

.order-section {
  padding: 4vw;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
}

.section-title {
  font-size: 4vw;
  font-weight: bold;
  margin-bottom: 2vw;
}

.order-types {
  display: flex;
  justify-content: space-around;
}

.type-item {
  text-align: center;
  cursor: pointer;
}

.type-item i {
  font-size: 6vw;
  color: #ff7043;
}

.type-item p {
  font-size: 3.5vw;
  margin-top: 1vw;
}

.function-list {
  padding: 2vw 4vw;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
}

.list-item {
  display: flex;
  align-items: center;
  padding: 1vw 0;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  height: 8vw;
}

.list-item i:first-child {
  width: 4vw;
  font-size: 3.8vw;
  color: #ff7043;
  text-align: center;
  margin-right: 2vw;
}

.list-item span {
  flex: 1;
  font-size: 3.5vw;
}

.list-item i:last-child {
  width: 4vw;
  font-size: 3.8vw;
  color: #999;
  text-align: center;
}

.list-item:last-child {
  border-bottom: none;
}
</style> 